require("./config/env");
const path = require("path");
const proxyTarget = require("./config/proxy");

let { version } = require("./package.json");
version = version.replace(/\./g, "_");
const webpack = require("webpack");

const HtmlWebpackPlugin = require("html-webpack-plugin");

const definePlugin = new webpack.DefinePlugin({
  "process.env.name": JSON.stringify("vue-cli")
});

const cdn = {
  css: [],
  js: [
    "https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js",
    "https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js",
    "https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js",
    "https://cdn.bootcss.com/axios/0.18.0/axios.min.js"
  ]
};

// 为public文件夹的html注入变量

const homeHtml = new HtmlWebpackPlugin({
  title: "home",
  template: "public/home/index.html",
  filename: "home/index.html",
  inject: false
});

module.exports = {
  lintOnSave: false,
  devServer: {
    open: false,
    host: "localhost", // 允许外部ip访问
    port: 8080, // 端口
    https: false, // 启用https
    overlay: {
      warnings: true,
      errors: true
    }, // 错误、警告在页面弹出
    proxy: {
      "/api": {
        target: proxyTarget,
        changeOrigin: true, // 允许websockets跨域
        // ws: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    } // 代理转发配置，用于调试环境
  },
  configureWebpack: (config) => {
    // 打包模式
    if (process.env.NODE_ENV === "production") {
      // 为生产环境修改配置...
      config.mode = "production";
      // 配置打包文件名
      Object.assign(config, {
        output: {
          ...config.output,
          filename: `js/[name].[contenthash:8].${version}.js`,
          chunkFilename: `js/[name].[contenthash:8].${version}.js`
        }
      });
    } else {
      // 为开发环境修改配置...
      config.mode = "development";
      // 配置打包文件名
      Object.assign(config, {
        output: {
          ...config.output,
          filename: `js/[name].[hash].${version}.js`,
          chunkFilename: `js/[name].[hash].${version}.js`
        }
      });
    }
    console.log(config.externals);
    Object.assign(config, {
      // 别名配置
      resolve: {
        alias: {
          "@": path.resolve(__dirname, "./src"),
          "@c": path.resolve(__dirname, "./src/components"),
          "@p": path.resolve(__dirname, "./src/pages")
        }
      },
      // 插件配置
      plugins: [...config.plugins, definePlugin, homeHtml],
      // 忽略打包
      externals: {
        vue: "Vue",
        vuex: "Vuex",
        "vue-router": "VueRouter",
        axios: "axios"
      }
    });
  },
  chainWebpack: (config) => {
    // 设置打包时注入的变量
    // 注意：打包库的时候，需要注释掉，否则报错
    config.plugin("html").tap((args) => {
      args[0].title = "vue_config";
      args[0].time = new Date();
      args[0].minify = {
        removeComments: false,
        collapseWhitespace: false,
        removeAttributeQuotes: true,
        collapseBooleanAttributes: true,
        removeScriptTypeAttributes: true
      };
      args[0].cdn = cdn;
      return args;
    });

    // 环境变量注入
    // config.plugin("define").tap((args) => {
    //   const [env] = args;
    //   env["process.env.NAME"] = JSON.stringify("vue-cli");
    //   env["process.env.NODE_ENV"] = JSON.stringify(process.env.NODE_ENV); // 需要单独设置，否则拿到的process.env.NODE_ENV是默认值，即development和production
    //   return args;
    // });
  }
};
